import 'package:flutter/material.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'points_detail_logic.dart';
import '../../../gen/assets.gen.dart';

/// 积分明细页面
class PointsDetailView extends GetView<PointsDetailLogic> {
  const PointsDetailView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // 背景图
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Assets.points.detailBg.image(
              fit: BoxFit.cover,
              height: 400.h,
            ),
          ),
          Column(
            children: [
              // 固定头部区域
              _buildFixedHeader(),
              // 可滚动内容
              Expanded(
                child: _buildScrollableContent(),
              ),
            ],
          ),
        ],
      ),
    );
  }

  /// 固定头部（包含标题、积分显示和tab栏）
  Widget _buildFixedHeader() {
    return Column(
      children: [
        SafeArea(
          bottom: false,
          child: Column(
            children: [
              // 顶部导航栏
              _buildAppBar(),
              SizedBox(height: 44.h),
              // 活力值标签
              Container(
                padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 2.h),
                decoration: BoxDecoration(
                  color: Color(0xff7f6151).withOpacity(0.75),
                  borderRadius: BorderRadius.circular(16.r),
                ),
                child: Text(
                  '活力值',
                  style: TextStyle(
                    fontSize: 10.sp,
                    color: Color(0xffFF931F),
                  ),
                ),
              ),
              SizedBox(height: 4.h),
              // 积分数值
              Obx(() => Text(
                    '${controller.state.totalPoints.value}',
                    style: TextStyle(
                      fontSize: 36.sp,
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                    ),
                  )),
              SizedBox(height: 31.h),
              // Tab栏
              _buildTabBar(),
            ],
          ),
        ),
      ],
    );
  }

  /// 顶部导航栏
  Widget _buildAppBar() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
      child: Row(
        children: [
          GestureDetector(
            onTap: () => Get.back(),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 20.sp,
            ),
          ),
          Expanded(
            child: Text(
              '积分明细',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(width: 20.w), // 占位保持居中
        ],
      ),
    );
  }

  /// Tab栏
  Widget _buildTabBar() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10.w),
      padding: EdgeInsets.all(4.w),
      decoration: BoxDecoration(
        color: const Color(0xFF17181B),
        borderRadius: BorderRadius.circular(25.r),
      ),
      child: Obx(() => Row(
            children: [
              _buildTabItem('全部', 0),
              _buildTabItem('积分收入', 1),
              _buildTabItem('积分支出', 2),
            ],
          )),
    );
  }

  /// Tab项
  Widget _buildTabItem(String title, int index) {
    final isSelected = controller.state.selectedTabIndex.value == index;
    return Expanded(
      child: GestureDetector(
        onTap: () => controller.changeTab(index),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 10.h),
          decoration: BoxDecoration(
            color: isSelected ? const Color(0xFF282A2D) : Colors.transparent,
            borderRadius: BorderRadius.circular(20.r),
          ),
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.white,
              fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
            ),
          ),
        ),
      ),
    );
  }

  /// 可滚动内容
  Widget _buildScrollableContent() {
    return Container(
      margin: EdgeInsets.only(top: 20.h),
      child: Obx(() {
        final records = controller.filteredRecords;
        if (records.isEmpty) {
          return Center(
            child: Text(
              '暂无记录',
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.grey[500],
              ),
            ),
          );
        }
        return ListView.builder(
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          itemCount: records.length,
          itemBuilder: (context, index) {
            return _buildRecordItem(records[index]);
          },
        );
      }),
    );
  }

  /// 记录项
  Widget _buildRecordItem(Map<String, dynamic> record) {
    final isIncome = record['type'] == 'income';
    final points = record['points'] as int;
    
    return Container(
      margin: EdgeInsets.only(bottom: 16.h),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: const Color(0xFF2A2A2A),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        children: [
          // 图标
          Container(
            width: 33.w,
            height: 33.w,
            decoration: BoxDecoration(
              color: const Color(0xFF353535),
              borderRadius: BorderRadius.circular(50.r),
            ),
            child: Center(
              child: Assets.points.pointValue.image(
                width: 24.w,
                height: 24.w,
              ),
            ),
          ),
          SizedBox(width: 12.w),
          // 标题和时间
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  record['title'],
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                    color: Color(0xffF7F7F7),
                  ),
                ),
                SizedBox(height: 8.h),
                Text(
                  '记录时间：${record['time']}',
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Color(0xffF7F7F7),
                  ),
                ),
              ],
            ),
          ),
          // 积分变化
          Text(
            '${points > 0 ? '+' : ''}$points',
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w500,
              color: isIncome ? const Color(0xFFF67F41) : Colors.grey[400],
            ),
          ),
        ],
      ),
    );
  }
}
